import {
    Form, Select, InputNumber, Switch, Radio,
    Slider, Button, Upload, Icon, Rate, Checkbox,
    Row, Col,Input
  } from 'antd';

const { Option } = Select;

class FormLogistics extends React.Component {
handleSubmit = (e) => {
  e.preventDefault();
  this.props.form.validateFields((err, values) => {
    if (!err) {
      console.log('Received values of form: ', values);
    }
  });
}

normFile = (e) => {
  console.log('Upload event:', e);
  if (Array.isArray(e)) {
    return e;
  }
  return e && e.fileList;
}

render() {
  const { getFieldDecorator } = this.props.form;
  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };
  return (
    <Form onSubmit={this.handleSubmit}>
      <Form.Item
        {...formItemLayout}
        label="基础销量"
      >
        {getFieldDecorator('sales', { initialValue: 3 })(
          <InputNumber min={1} max={10} />
        )}
        <span className="ant-form-text">/个</span>
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        label="运费设置"
      >
        {getFieldDecorator('freight')(
          <Radio.Group>
            <Radio value="free">全国包邮</Radio>
            <Radio value="pay">统一邮费</Radio>
          </Radio.Group>
        )}
      </Form.Item>

      {/* <Form.Item
        {...formItemLayout}
        label="特殊标记"
      >
        {getFieldDecorator('remark')(
          <Radio.Group>
            <Radio.Button value="a">精品</Radio.Button>
            <Radio.Button value="b">新品</Radio.Button>
            <Radio.Button value="c">热销</Radio.Button>
          </Radio.Group>
        )}
      </Form.Item> */}

      <Form.Item
        {...formItemLayout}
        label="特殊标记"
      >
        {getFieldDecorator("remark", {
          initialValue: ["A", "B"],
        })(
          <Checkbox.Group style={{ width: "100%" }}>
            <Row>
              <Col span={8}><Checkbox value="A">精品</Checkbox></Col>
              <Col span={8}><Checkbox value="B">新品</Checkbox></Col>
              <Col span={8}><Checkbox value="C">热销</Checkbox></Col>

            </Row>
          </Checkbox.Group>
        )}
      </Form.Item>

      <Form.Item
        {...formItemLayout}
        label="状态"
      >
        {getFieldDecorator('state')(
          <Radio.Group>
            <Radio value="free">上架</Radio>
            <Radio value="pay">下架</Radio>
          </Radio.Group>
        )}
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        label="佣金分润"
      >
        {getFieldDecorator('share')(
          <Radio.Group>
            <Radio value="free">关闭</Radio>
            <Radio value="pay">开启</Radio>
          </Radio.Group>
        )}
      </Form.Item>

    </Form>
  );
}
}

const FormLogisticsWrap = Form.create({})(FormLogistics);
export default FormLogisticsWrap;